<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="typewriter">
    <div class="mask">
      <p>—— {{ from }} · {{ creator }} </p>
    </div>
    <p> {{ message }}</p>

  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import axios from 'axios'
import { writer } from '@/utils/Ttypewriter';
const message = ref<string>('')
const creator = ref<string>('')
const from = ref<string>('')

let setwriter: number = 0
onMounted(() => {
  async function addwriter() {
    const { data } = await axios.get('https://v1.hitokoto.cn/')
    writer(message, data.hitokoto)
    creator.value = data.creator
    from.value = data.from
  }

  addwriter()
  setwriter = setInterval(addwriter, 5800)


})

onUnmounted(() => {
  clearInterval(setwriter)
})
</script>

<style scoped lang="scss">
.typewriter {
  position: relative;
  margin: 20px;
  height: 50px;

  .mask {
    margin: 0 auto;
    left: 0;
    right: 0;
    position: absolute;
    width: 530px;
    height: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(30px) saturate(1.25);
    border-radius: 5px;
    z-index: -1;

    p {
      margin-top: 28px;
    }

    opacity: 0;
    transition: 0.5s;


  }



  &:hover .mask {
    opacity: 1;
  }
}
</style>